{% extends "templates/web.html" %}

{% block page_content %}
<link rel="stylesheet" type="text/css" href="/assets/upsystem/css/tms_common.css">
<div class="tms-container">
    <!-- 顶部状态标签页 -->
    <div class="tms-section">
        <div class="tms-tabs">
            <div class="tms-tab-item active" data-status="processing">
                <span class="tms-tab-label">处理中</span>
                <span class="tms-tab-count">(12)</span>
            </div>
            <div class="tms-tab-item" data-status="notified">
                <span class="tms-tab-label">已通知</span>
                <span class="tms-tab-count">(8)</span>
            </div>
            <div class="tms-tab-item" data-status="resolved">
                <span class="tms-tab-label">已解决</span>
                <span class="tms-tab-count">(156)</span>
            </div>
        </div>
    </div>

    <!-- 处理类别标签页 -->
    <div class="tms-section">
        <div class="tms-tabs">
            <div class="tms-tab-item active" data-category="warehouse">
                <span class="tms-tab-label">仓库处理</span>
                <span class="tms-tab-count">(6)</span>
            </div>
            <div class="tms-tab-item" data-category="last-mile">
                <span class="tms-tab-label">最后一公里处理</span>
                <span class="tms-tab-count">(4)</span>
            </div>
            <div class="tms-tab-item" data-category="other">
                <span class="tms-tab-label">其他处理</span>
                <span class="tms-tab-count">(2)</span>
            </div>
        </div>
    </div>

    <!-- 筛选和搜索区域 -->
    <div class="order-search-filter">
        <div class="search-row">
            <div class="search-group">
                <label class="tms-form-label">运单号</label>
                <input type="text" class="tms-form-input" id="waybillInput" placeholder="输入运单号">
            </div>
            <div class="search-group">
                <label class="tms-form-label">问题类型</label>
                <select class="tms-form-select" id="problemType">
                    <option value="">全部</option>
                    <option value="材积重比实重大">材积重比实重大</option>
                    <option value="偏远地区附加费确认">偏远地区附加费确认</option>
                    <option value="海关文件要求">海关文件要求</option>
                    <option value="地址验证">地址验证</option>
                    <option value="包裹损坏">包裹损坏</option>
                    <option value="收件人拒收">收件人拒收</option>
                </select>
            </div>
            <div class="search-group">
                <label class="tms-form-label">更多筛选</label>
                <button class="tms-btn tms-btn-secondary" id="moreFiltersBtn">
                    <i class="fas fa-filter"></i> 更多筛选
                </button>
            </div>
            <div class="search-group">
                <button class="tms-btn tms-btn-primary" id="searchBtn">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </div>
        </div>
    </div>

    <!-- 内容标签页 -->
    <div class="tms-section">
        <div class="tms-tabs">
            <div class="tms-tab-item active" data-content="pending">
                <span class="tms-tab-label">待处理</span>
                <span class="tms-tab-count">(8)</span>
            </div>
            <div class="tms-tab-item" data-content="processed">
                <span class="tms-tab-label">已处理</span>
                <span class="tms-tab-count">(4)</span>
            </div>
        </div>
    </div>

    <!-- 全局操作按钮 -->
    <div class="order-actions">
        <button class="tms-btn tms-btn-primary" id="intelligentSettingBtn">
            <i class="fas fa-cog"></i> 智能设置
        </button>
        <button class="tms-btn tms-btn-secondary" id="releaseBtn">
            <i class="fas fa-unlock"></i> 释放
        </button>
        <button class="tms-btn tms-btn-secondary" id="returnBtn">
            <i class="fas fa-undo"></i> 退回
        </button>
        <button class="tms-btn tms-btn-secondary" id="returnDetailsBtn">
            <i class="fas fa-info-circle"></i> 退回详情
        </button>
        <button class="tms-btn tms-btn-secondary" id="awbChangeBtn">
            <i class="fas fa-exchange-alt"></i> AWB变更
        </button>
        <div class="dropdown">
            <button class="tms-btn tms-btn-secondary dropdown-toggle" id="moreActionsBtn">
                更多 <i class="fas fa-chevron-down"></i>
            </button>
            <div class="dropdown-menu" id="moreActionsMenu">
                <a href="#" class="dropdown-item">批量操作</a>
                <a href="#" class="dropdown-item">导出数据</a>
                <a href="#" class="dropdown-item">打印标签</a>
                <a href="#" class="dropdown-item">发送通知</a>
            </div>
        </div>
    </div>

    <!-- 异常订单列表 -->
    <div class="tms-section">
        <div class="exception-orders-list">
            <!-- 异常订单项目 1 -->
            <div class="exception-order-item">
                <div class="order-header">
                    <div class="order-status">
                        <span class="tms-status-badge scheduled">待处理</span>
                    </div>
                    <div class="order-priority high">高优先级</div>
                </div>

                <div class="order-content">
                    <div class="order-main-info">
                        <div class="waybill-section">
                            <a href="/upsystem/tms_order_detail?wayBillNumber=YT2523400706780414" class="waybill-link">
                                <span class="waybill-number">YT2523400706780414</span>
                            </a>
                            <span class="country-flag">🇺🇸</span>
                        </div>
                        <div class="order-details">
                            <div class="recipient-info">
                                <span class="recipient-name">John Smith</span>
                                <span class="recipient-address">123 Main St, Los Angeles, CA 90210</span>
                            </div>
                            <div class="problem-info">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span class="problem-text">材积重比实重大</span>
                            </div>
                        </div>
                    </div>

                    <div class="order-actions-inline">
                        <button class="tms-btn tms-btn-primary btn-sm" onclick="handleOperate('YT2523400706780414', 'approve')">
                            <i class="fas fa-check"></i> 批准
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523400706780414', 'reject')">
                            <i class="fas fa-times"></i> 拒绝
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523400706780414', 'hold')">
                            <i class="fas fa-pause"></i> 暂停
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523400706780414', 'contact')">
                            <i class="fas fa-phone"></i> 联系
                        </button>
                    </div>

                    <div class="order-timer">
                        <div class="remaining-time">剩余时间: 1天 6小时 32分钟</div>
                        <div class="created-time">创建时间: 2024-01-15 14:30</div>
                    </div>
                </div>
            </div>

            <!-- 异常订单项目 2 -->
            <div class="exception-order-item">
                <div class="order-header">
                    <div class="order-status">
                        <span class="tms-status-badge scheduled">待处理</span>
                    </div>
                    <div class="order-priority medium">中优先级</div>
                </div>

                <div class="order-content">
                    <div class="order-main-info">
                        <div class="waybill-section">
                            <a href="/upsystem/tms_order_detail?wayBillNumber=YT2523501400141793" class="waybill-link">
                                <span class="waybill-number">YT2523501400141793</span>
                            </a>
                            <span class="country-flag">🇦🇺</span>
                        </div>
                        <div class="order-details">
                            <div class="recipient-info">
                                <span class="recipient-name">Emma Johnson</span>
                                <span class="recipient-address">456 High St, Sydney, NSW 2000</span>
                            </div>
                            <div class="problem-info">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span class="problem-text">偏远地区附加费确认</span>
                            </div>
                        </div>
                    </div>

                    <div class="order-actions-inline">
                        <button class="tms-btn tms-btn-primary btn-sm" onclick="handleOperate('YT2523501400141793', 'approve')">
                            <i class="fas fa-check"></i> 批准
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523501400141793', 'reject')">
                            <i class="fas fa-times"></i> 拒绝
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523501400141793', 'hold')">
                            <i class="fas fa-pause"></i> 暂停
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523501400141793', 'contact')">
                            <i class="fas fa-phone"></i> 联系
                        </button>
                    </div>

                    <div class="order-timer">
                        <div class="remaining-time">剩余时间: 2天 18小时 58分钟</div>
                        <div class="created-time">创建时间: 2024-01-14 16:45</div>
                    </div>
                </div>
            </div>

            <!-- 异常订单项目 3 -->
            <div class="exception-order-item">
                <div class="order-header">
                    <div class="order-status">
                        <span class="tms-status-badge scheduled">待处理</span>
                    </div>
                    <div class="order-priority low">低优先级</div>
                </div>

                <div class="order-content">
                    <div class="order-main-info">
                        <div class="waybill-section">
                            <a href="/upsystem/tms_order_detail?wayBillNumber=YT2523801001599989" class="waybill-link">
                                <span class="waybill-number">YT2523801001599989</span>
                            </a>
                            <span class="country-flag">🇺🇸</span>
                        </div>
                        <div class="order-details">
                            <div class="recipient-info">
                                <span class="recipient-name">Michael Brown</span>
                                <span class="recipient-address">789 Oak Ave, New York, NY 10001</span>
                            </div>
                            <div class="problem-info">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span class="problem-text">海关文件要求</span>
                            </div>
                        </div>
                    </div>

                    <div class="order-actions-inline">
                        <button class="tms-btn tms-btn-primary btn-sm" onclick="handleOperate('YT2523801001599989', 'approve')">
                            <i class="fas fa-check"></i> 批准
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523801001599989', 'reject')">
                            <i class="fas fa-times"></i> 拒绝
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523801001599989', 'hold')">
                            <i class="fas fa-pause"></i> 暂停
                        </button>
                        <button class="tms-btn tms-btn-secondary btn-sm" onclick="handleOperate('YT2523801001599989', 'contact')">
                            <i class="fas fa-phone"></i> 联系
                        </button>
                    </div>

                    <div class="order-timer">
                        <div class="remaining-time">剩余时间: 3天 6小时 15分钟</div>
                        <div class="created-time">创建时间: 2024-01-13 12:20</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <div class="tms-pagination">
        <div class="tms-pagination-info">
            显示 1-3 条，共 20 条记录
        </div>
        <div class="tms-pagination-controls">
            <select class="tms-page-size-select">
                <option value="10">10 条/页</option>
                <option value="20" selected>20 条/页</option>
                <option value="50">50 条/页</option>
            </select>
            <div class="tms-pagination-buttons">
                <button class="tms-page-btn" disabled>上一页</button>
                <button class="tms-page-btn active">1</button>
                <button class="tms-page-btn">2</button>
                <button class="tms-page-btn">下一页</button>
            </div>
        </div>
    </div>
</div>

<script>
// 使用TMS系统的JavaScript功能
document.addEventListener('DOMContentLoaded', function() {
    // 初始化TMS系统
    if (window.TMS) {
        console.log('异常订单页面初始化开始');

        // 绑定事件
        bindEvents();

        console.log('异常订单页面初始化完成');
    } else {
        console.warn('TMS系统未加载，使用基础功能');
        bindEvents();
    }
});

// 绑定事件
function bindEvents() {
    // 顶部状态标签页
    const topTabItems = document.querySelectorAll('.tms-tabs:first-of-type .tms-tab-item');
    topTabItems.forEach(tab => {
        tab.addEventListener('click', handleTopTabClick);
    });

    // 处理类别标签页
    const categoryTabItems = document.querySelectorAll('.tms-tabs:nth-of-type(2) .tms-tab-item');
    categoryTabItems.forEach(tab => {
        tab.addEventListener('click', handleCategoryTabClick);
    });

    // 内容标签页
    const contentTabItems = document.querySelectorAll('.tms-tabs:nth-of-type(3) .tms-tab-item');
    contentTabItems.forEach(tab => {
        tab.addEventListener('click', handleContentTabClick);
    });

    // 搜索按钮
    const searchBtn = document.getElementById('searchBtn');
    if (searchBtn) {
        searchBtn.addEventListener('click', handleSearch);
    }

    // 全局操作按钮
    const intelligentSettingBtn = document.getElementById('intelligentSettingBtn');
    if (intelligentSettingBtn) {
        intelligentSettingBtn.addEventListener('click', handleIntelligentSetting);
    }

    const releaseBtn = document.getElementById('releaseBtn');
    if (releaseBtn) {
        releaseBtn.addEventListener('click', handleRelease);
    }

    const returnBtn = document.getElementById('returnBtn');
    if (returnBtn) {
        returnBtn.addEventListener('click', handleReturn);
    }

    const returnDetailsBtn = document.getElementById('returnDetailsBtn');
    if (returnDetailsBtn) {
        returnDetailsBtn.addEventListener('click', handleReturnDetails);
    }

    const awbChangeBtn = document.getElementById('awbChangeBtn');
    if (awbChangeBtn) {
        awbChangeBtn.addEventListener('click', handleAWBChange);
    }

    // 更多操作下拉菜单
    const moreActionsBtn = document.getElementById('moreActionsBtn');
    if (moreActionsBtn) {
        moreActionsBtn.addEventListener('click', toggleMoreActionsMenu);
    }

    // 分页按钮
    const pageBtns = document.querySelectorAll('.tms-page-btn');
    pageBtns.forEach(btn => {
        if (!btn.disabled) {
            btn.addEventListener('click', handlePageChange);
        }
    });

    // 页面大小选择
    const pageSizeSelect = document.querySelector('.tms-page-size-select');
    if (pageSizeSelect) {
        pageSizeSelect.addEventListener('change', handlePageSizeChange);
    }
}

// 顶部标签页点击处理
function handleTopTabClick(e) {
    const tabItems = document.querySelectorAll('.tms-tabs:first-of-type .tms-tab-item');
    tabItems.forEach(tab => tab.classList.remove('active'));

    e.target.closest('.tms-tab-item').classList.add('active');

    const status = e.target.closest('.tms-tab-item').dataset.status;

    if (window.TMS) {
        console.log('切换到顶部状态标签:', status);
    }

    // 加载对应状态的异常订单
    loadExceptionOrdersByStatus(status);
}

// 处理类别标签页点击处理
function handleCategoryTabClick(e) {
    const tabItems = document.querySelectorAll('.tms-tabs:nth-of-type(2) .tms-tab-item');
    tabItems.forEach(tab => tab.classList.remove('active'));

    e.target.closest('.tms-tab-item').classList.add('active');

    const category = e.target.closest('.tms-tab-item').dataset.category;

    if (window.TMS) {
        console.log('切换到处理类别标签:', category);
    }

    // 加载对应类别的异常订单
    loadExceptionOrdersByCategory(category);
}

// 内容标签页点击处理
function handleContentTabClick(e) {
    const tabItems = document.querySelectorAll('.tms-tabs:nth-of-type(3) .tms-tab-item');
    tabItems.forEach(tab => tab.classList.remove('active'));

    e.target.closest('.tms-tab-item').classList.add('active');

    const content = e.target.closest('.tms-tab-item').dataset.content;

    if (window.TMS) {
        console.log('切换到内容标签:', content);
    }

    // 加载对应内容的异常订单
    loadExceptionOrdersByContent(content);
}

// 搜索处理
function handleSearch() {
    const waybill = document.getElementById('waybillInput').value.trim();
    const problemType = document.getElementById('problemType').value;

    if (window.TMS) {
        console.log('执行异常订单搜索:', { waybill, problemType });
    }

    // 执行搜索逻辑
    alert(`搜索条件：运单号=${waybill}, 问题类型=${problemType}`);
}

// 智能设置处理
function handleIntelligentSetting() {
    if (window.TMS) {
        console.log('用户点击智能设置');
    }
    alert('智能设置功能');
}

// 释放处理
function handleRelease() {
    if (window.TMS) {
        console.log('用户点击释放');
    }
    alert('释放功能');
}

// 退回处理
function handleReturn() {
    if (window.TMS) {
        console.log('用户点击退回');
    }
    alert('退回功能');
}

// 退回详情处理
function handleReturnDetails() {
    if (window.TMS) {
        console.log('用户点击退回详情');
    }
    alert('退回详情功能');
}

// AWB变更处理
function handleAWBChange() {
    if (window.TMS) {
        console.log('用户点击AWB变更');
    }
    alert('AWB变更功能');
}

// 切换更多操作菜单
function toggleMoreActionsMenu() {
    const menu = document.getElementById('moreActionsMenu');
    if (menu) {
        menu.classList.toggle('show');
    }
}

// 页面变化处理
function handlePageChange(e) {
    const pageBtns = document.querySelectorAll('.tms-page-btn');
    pageBtns.forEach(btn => btn.classList.remove('active'));

    e.target.classList.add('active');

    const page = e.target.textContent;

    if (window.TMS) {
        console.log('切换到页面:', page);
    }

    // 加载对应页面的数据
    loadExceptionOrdersByPage(page);
}

// 页面大小变化处理
function handlePageSizeChange(e) {
    const pageSize = e.target.value;

    if (window.TMS) {
        console.log('页面大小变化:', pageSize);
    }

    // 重新加载数据
    loadExceptionOrdersWithPageSize(pageSize);
}

// 处理订单操作
function handleOperate(waybillNumber, action) {
    if (window.TMS) {
        console.log('处理异常订单操作:', { waybillNumber, action });
    }

    let actionText = '';
    switch (action) {
        case 'approve':
            actionText = '批准';
            break;
        case 'reject':
            actionText = '拒绝';
            break;
        case 'hold':
            actionText = '暂停';
            break;
        case 'contact':
            actionText = '联系';
            break;
        default:
            actionText = '操作';
    }

    alert(`${actionText}订单: ${waybillNumber}`);
}

// 加载指定状态的异常订单
function loadExceptionOrdersByStatus(status) {
    if (window.TMS) {
        console.log('加载状态异常订单:', status);
    }
    // 实现加载逻辑
}

// 加载指定类别的异常订单
function loadExceptionOrdersByCategory(category) {
    if (window.TMS) {
        console.log('加载类别异常订单:', category);
    }
    // 实现加载逻辑
}

// 加载指定内容的异常订单
function loadExceptionOrdersByContent(content) {
    if (window.TMS) {
        console.log('加载内容异常订单:', content);
    }
    // 实现加载逻辑
}

// 加载指定页面的异常订单
function loadExceptionOrdersByPage(page) {
    if (window.TMS) {
        console.log('加载页面异常订单:', page);
    }
    // 实现加载逻辑
}

// 加载指定页面大小的异常订单
function loadExceptionOrdersWithPageSize(pageSize) {
    if (window.TMS) {
        console.log('加载页面大小异常订单:', pageSize);
    }
    // 实现加载逻辑
}
</script>
{% endblock %}
